<template>
  <div class="conent">
    <div v-for="(item, index) in tooltipArr" :key="index">
      <Tooltip :placement="item">
        <div class="button">{{ map[item] }}</div>

        <template #tooltip>
          <div>这是内容-{{ map[item] }}</div>
        </template>
      </Tooltip>
    </div>
  </div>
</template>

<script setup lang="ts">
const tooltipArr = ['bottom', 'top', 'left', 'right']

const map = ref<{ [key: string]: string }>({
  bottom: '向下',
  top: '向上',
  left: '向左',
  right: '向右'
})
</script>

<style scoped lang="scss">
.conent {
  display: flex;
}

.button {
  background: $main-color;
  padding: 4px 15px;
  color: #fff;
  border-radius: 4px;
  cursor: pointer;
}
</style>
